<!DOCTYPE html>
<html>

<head>
    <title>简易留言板</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

    <div class="container mt-3">
        <h4>简易留言板</h4>

        <div class="pre-scrollable">
            {{each comments}}
            <div class="d-flex bg-light border">
                <div class="p-2 mr-auto">{{$value.name}}说:{{$value.message}}</div>
                <div class="p-2">{{$value.dataTime}}</div>
            </div>
            {{/each}}
        </div>

        <form action="/pinglun" method="GET">
            <div class="form-group">
                <label for="name">名字:</label>
                <input type="name" class="form-control" name="name" id="name" required placeholder="请输入你的名字">

                <!-- <label for="sex">性别:</label>
                <input type="sex" class="form-control" name="sex" id="sex" required placeholder="请输入你的名字">
                <label for="hobby">兴趣爱好:</label>
                <input type="text" class="form-control" name="hobby" id="hobby" required placeholder="请输入你的名字">
                <label for="estimate">个人评价:</label>
                <input type="text" class="form-control" name="estimate" id="estimate" required placeholder="请输入你的名字"> -->

                <label for="message">评论:</label>
                <textarea class="form-control" rows="5" name="message" id="message" required minlength="2"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
        <!-- <button class="btn btn-primary" onclick="submit()">ajax 提交</button> -->
    </div>
    <script>
        function submit(){
            $.ajax({
                url: '/pinglun',
                type: 'GET',
                data: {
                    name: 'ajax方法',
                    message: '这是ajax方法提交的数据'
                },
                success: function(){
                    alert('你提交的评论不符合社会核心价值观，请重新填写！');
                }
            })
        }
        //第一步 XMLHttpRequest()
        var xhr = new XMLHttpRequest();
        //第二步 配置XMLHttpRequest()
        xhr.open('GET','http://127.0.0.1:8889/data');
        //第三步 发送请求
        xhr.send();
        //第四步 接收服务器响应数据
        xhr.onload = function(){
            console.log(xhr.responseText)
        }
    </script>

</body>

</html>